<template>
	<div id="app">
		<dlb-header />
		<router-view/>
		<dlb-footer />
		<dlb-sidebar :isShowTopBtn="isShowTopBtn"/>
	</div>
</template>

<script>
import dlbHeader from './components/header'
import dlbFooter from './components/footer'
import dlbSidebar from './components/sidebar'
export default {
	name: 'App',
	components:{ dlbHeader, dlbFooter, dlbSidebar },
	data(){
		return{
			isShowTopBtn: false
		}
	},
	mounted(){
		this.$nextTick(() => {
			if(this.$route.name == 'detail'){
				$(".header").addClass("bg");
			}else{
				window.addEventListener('scroll', this.onScroll)
			}
		})
	  },
	  watch:{
		'$route'(n, o) {
			if(n.name == 'detail'){
				window.removeEventListener('scroll', this.onScroll)
				$(".header").addClass("bg");
			}else{
				window.addEventListener('scroll', this.onScroll)
				$(".header").removeClass("bg");
			}
        },
	},
	methods:{
		onScroll() {
			var scrollTop = $(document).scrollTop();
			// 导航栏吸顶
			if((scrollTop > 0) && ($(window).width() > 767)) {
				this.isShowTopBtn = true
				$(".header").addClass("fixed-header-on");
			} else {
				this.isShowTopBtn = false
				$(".header").removeClass("fixed-header-on");
			}
    	}
	}
}
</script>